30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 9

30天掌握Sass語法系列第 9 篇

30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫

網頁設計 css 鐵人賽 sass

廖洧杰

2013-09-24 00:18:28

16934 瀏覽

分享至

今日教學重點：
(1)用_mixin.sass來整理自己曾經寫過的CSS
(2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法
(3)你相信嗎？Compass可以解析算出圖片的寬高！

網頁設計師在撰寫CSS時，
通常都會用一些工具來整理自己曾經寫過的CSS碼，
日後只要複製貼上，再微調一些樣式後便可以重複再利用。

舉例來說使用:
(1)Dreamweaver 片段工具，將程式碼的片段儲存到Dreamveaver裡面
(2)使用sublime text 3的snippet工具，打熱鍵便可將程式碼呼叫出來
(3)整理出一個乾淨的版本儲存在雲端硬碟(Dropbox、Evernote)，要使用時隨時可呈現出來。

但如果是用Sass的話，
你可以利用@Mixin、@extend來整理自己的程式碼，
來提升你撰寫程式碼的效率，
以及逐步建立自己的CSS資料庫，
如下影片內容：

今日教學重點：
(1)用_mixin.sass來整理自己曾經寫過的CSS
(2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法
(3)你相信嗎？Compass可以解析算出圖片的寬高！

網頁設計師在撰寫CSS時，
通常都會用一些工具來整理自己曾經寫過的CSS碼，
日後只要複製貼上，再微調一些樣式後便可以重複再利用。

但如果是用Sass的話，
你可以利用@Mixin、@extend來整理自己的程式碼，
來提升你撰寫程式碼的效率，
以及逐步建立自己的CSS資料庫，
如下影片內容：

從影片內容中，
再次解說了一次@import的重要性，
它可以將Sass程式碼進行合併，
然後最後再輸出成CSS，

通常來說reset的CSS一定是放最上面的，
如果你沒有自己的reset的話，那也是可以用compass預設的reset：

@import compass/reset

如果你有用到變數的地方，
那也請記得變數必須放在你要使用的程式碼的上方，
這樣才有辦法繼承到，因為Sass的程式碼是從上到下來進行程式判斷的，

影片內容中，
我展示了了一般傳統寫CSS的連結圖片取代文字的流程，
如果是純寫CSS，你需要記的語法與短期性記憶的東西會較多，
短時間需要記憶的是：
1.背景圖片的名稱(logo.png)
2.圖片寬度像素(355px)
3.圖片高度像素(60px)

CSS程式碼為：

.header h1 a {
  background: url("../images/logo.png");
  width: 315px;
  height: 55px;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

但如果是用Sass的話，
你只要寫這幾行就收工了，
編譯出來的程式碼自動就會變成上面的CSS碼

.header h1 a
 +bg(logo,png)
 display: block
 +text-hide

當然這並不是魔術，
而是我寫了一些@mixin來加速我的開發效率：

@mixin bg($name,$bg) 
  background: url("../images/#{$name}.#{$bg}")
  width: image-width("../images/#{$name}.#{$bg}")
  height: image-height("../images/#{$name}.#{$bg}")
@mixin text-hide
  white-space: nowrap
  text-indent: 100%
  overflow: hidden

而image-width("圖片路徑")與image-height("圖片路徑")的語法，
就是Compass其中一種強大的功能，
它可以自動幫你去計算該圖片的高與寬的像素，
所以往後如果你圖片有修改高寬的話，
直接丟進圖片資料夾就會自動幫你計算高度了，
真的是十分方便的語法之一。

而text-hide則是圖片取代文字的做法，
在早期我們都是用text-indent:-99999px來解決，
但由於行動裝置的興起，用這語法會導致行動裝置瀏覽器為了渲染這寬度，
在效能上會變得很慢，所以才又會有人發明出這個新的解法。

而這三行程式碼又很難去背誦，
所以我就寫入到了我的_mixin.sass檔案去，
以後我要使用時，隨時都可以載入，
而且你也不用怕因為這樣導致你的程式碼便多，
因為mixin並不會載入到你的css去，
除非你有在sass載入進來，它才會編譯出來。

一開始你也可以不用下定決心使用Sass，
你可以評估你目前的網頁設計流程，
該如何使用mixin、extend、變數來進行效率優化，
等到你的mixin夠多了以後，再轉用Sass語法效率自然會飛躍性地提升。
這裡也推薦一個Sass framework，裡頭也蒐集了不少mixin，
http://bourbon.io/

最後再提到compass支援CSS3的功能，
首先你要先在Sass檔案引入compass CSS3。

@import compass/css3

再來他寫Sass的方式如下：

.header a
 +border-radius(50px)
 +opacity(0.2)
 +box-shadow(3px 3px 5px #000)

而編譯出來的CSS程式碼會變成如下：

.header a{
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
  -webkit-box-shadow: 3px 3px 5px black;
  -moz-box-shadow: 3px 3px 5px black;
  box-shadow: 3px 3px 5px black;
}